<template>
  <div id="main"></div>
</template>

<script>
import * as zrender from "zrender";
export default {
    mounted(){
        this.zr = zrender.init(document.getElementById("main"));
        let line = new zrender.Line({
            shape: {
                x1: 0,
                y1: 0,
                x2: 100, y2: 500,
                percent: 0
            },
            style:{
                lineDash: [5, 5],
                stroke:  '#f00'
            }
        })
        this.zr.add(line)
        line.animateTo({shape:{

            percent: 1
        }
        }, 400)
    }
}
</script>

<style scoped>
#main {
  width: 80vw;
  height: 90vh;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>